<template>
  <div class="integral fixed bottom-0 left-0 right-0 top-0 h-100% overflow-y-auto" style="background: linear-gradient(180deg, #FFF 0%, #F5F5F5 100%);">
    <div class="sticky left-0 right-0 top-0 z-999">
      <div class="relative">
        <div class="z-999 flex items-center justify-between px-20rpx" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
          <uni-icons type="back" size="28" />
          <span class="text-center text-36rpx font-600">优惠卷</span>
          <div class="text-hex-fff">111</div>
        </div>
        <div class="mt-48rpx">
          <div class="flex justify-around">
            <div
              v-for="item in cloumnList"
              class="flex flex-col justify-center text-28rpx text-hex-666666"
              @click="handTabClick(item)">
              <text class="z-9" :class="{ 'text-32rpx text-hex-383B34 font-600': currentTab === item.id }">{{ item.name }}</text>
              <image
                v-if="currentTab===item.id"
                class="relative z-999 h-30rpx w-64rpx -mt-10rpx"
                :src="`${cdnUrl}/imgs/square/selected.png${imgVersion}`"
                mode="scaleToFill"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-32rpx px-32rpx">
      <div
        v-if="isCouponActivity"
        class="relative h-180rpx w-100% rounded-24rpx"
        @click="goCoupon">
        <div class="h-100%">
          <image
            :src="`${cdnUrl}/imgs/mine/my_slices/claimNow.png${imgVersion}`"
            mode="scaleToFill"
            class="pointer-events-none h-100% w-100%"
          />
        </div>
        <div class="absolute left-0 right-0 top-0 flex">
          <div class="z-9 ml-35rpx box-border pt-26rpx">
            <div class="text-24rpx text-hex-999999">最高可减</div>
            <div class="text-60rpx font-bold text-hex-FF4F47">{{ couponActivity.discountAmount }}</div>
          </div>
          <div class="z-9 ml-64rpx box-border pt-34rpx">
            <div class="mb-8rpx text-32rpx font-bold text-hex-333333">{{ couponActivity.couponType===0?'满减券':'立减券' }}</div>
            <div class="text-24rpx text-hex-999999">先到先得</div>
          </div>
        </div>
      </div>
      <div v-for="item in couponList" class="item mb-32rpx mt-32rpx h-164rpx flex items-center">
        <div class="min-w-204rpx text-hex-fff">
          <div class="relative">
            <image
              v-if="currentTab===0"
              class="h-164rpx w-100% -z-1"
              :src="`${cdnUrl}/imgs/mine/my_slices/certificate1.png${imgVersion}`" mode="aspectFill" />
            <image
              v-if="currentTab===1"
              class="h-164rpx w-100% -z-1"
              :src="`${cdnUrl}/imgs/mine/my_slices/certificate2.png${imgVersion}`" mode="aspectFill" />
            <image
              v-if="currentTab===2"
              class="h-164rpx w-100% -z-1"
              :src="`${cdnUrl}/imgs/mine/my_slices/certificate3.png${imgVersion}`" mode="aspectFill" />
            <div class="absolute left-35rpx top-25rpx">
              <span class="ml-25rpx text-28rpx">{{ item.couponTypeStr }}</span>
              <span class="text-32rpx font-600">￥</span>
              <span class="text-60rpx font-600">{{ item.discountAmount }}</span>
            </div>
          </div>
        </div>
        <div class="ml-32rpx flex-1">
          <div class="flex items-center justify-between">
            <span v-if="currentTab===0 || currentTab===1" class="flex-1 text-36rpx font-600 text-hex-333">{{ item.couponUseTypeStr }}</span>
            <span v-if="currentTab===2" class="flex-1 text-36rpx font-600 text-hex-DADADA">{{ item.couponUseTypeStr }}</span>
            <span class="text-24rpx">
              <span v-if="currentTab===0 " class="text-hex-999999">可使用</span>
              <span v-if="currentTab===1" class="text-hex-999999">已使用</span>
              <span v-if="currentTab===2" class="text-hex-DADADA">已失效</span>
            </span>
          </div>
          <div class="mt-44rpx flex items-center items-center justify-between">
            <div v-if="currentTab===0 || currentTab===1" class="text-24rpx text-hex-999999">{{ item.couponValidTimeStr }}</div>
            <div v-if="currentTab===2" class="text-24rpx text-hex-DADADA">{{ item.couponValidTimeStr }}</div>
            <span v-if="currentTab===0 " class="text-24rpx text-hex-18A786">x{{ item.totalAmount }}</span>
            <span v-if="currentTab===1" class="text-24rpx text-hex-999999">x{{ item.totalAmount }}</span>
            <span v-if="currentTab===2" class="text-24rpx text-hex-DADADA">x{{ item.totalAmount }}</span>
          </div>
        </div>
      </div>
      <div v-if="couponList.length===0">
        <div class="flex flex-col items-center justify-center">
          <image
            :src="`${cdnUrl}/imgs/noOpen/noText.png`"
            mode="scaleToFill"
            class="h-300rpx w-300rpx"
          />
          <div class="mb-64rpx text-28rpx text-hex-7C8699">暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { useUserStore } from '@/stores/user'

let userStore: any = useUserStore()
let searchBarTop: any = $ref('24')
let rightBar: any = $ref(0)
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  rightBar = menuButtonInfo.width

  // #endif
})
const goback = () => {
  navTo('/pages/mine')
}
const goCoupon = () => {
  console.log(111111111)
  navTo('/pages-mine/claimCoupon')
}
let currentTab = $ref(0)
let cloumnList: any = $ref([
  {
    id: 0,
    name: '未使用',
  },
  {
    id: 1,
    name: '已使用',
  },
  {
    id: 2,
    name: '已失效',
  },
])
const handTabClick = (item) => {
  currentTab = item.id
  couponList = []
  getCouponList()
}

let couponList: any = $ref([])
// 获取优惠券列表
const getCouponList = async () => {
  const reqData = {
    method: 'post',
    data: {
      couponAppType: 1,
      showStatusCode: currentTab,
    },
    headers: { UserId: userStore.user.id },
  }
  const { status, data, error } = await Fetch('/qqyapi/coupon/couponCenter/queryUserCouponGroupList', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    let tempList: any = []
    tempList = data?.result
    couponList = tempList
  }
}

let couponActivity: any = $ref({})
let isCouponActivity: any = $ref(false)
// 获取优惠券活动
const getCouponActivity = async () => {
  let reqData = {
    method: 'get',
    data: {
      'pageNo': 1,
      'pageSize': 10,
    },
    headers: { UserId: userStore.user.id },
  }
  const { status, data, error } = await Fetch('/qqyapi/coupon/couponCenter/queryCouponClaimStrategyDTO', reqData)
  if (status !== 200 || data.code !== 0) {
    return
  }
  if (data.code === 0) {
    let tempList: any = []
    tempList = data?.result?.list
    if (tempList.length > 0) {
      isCouponActivity = true
      couponActivity = tempList[0]
    } else {
      isCouponActivity = false
    }
  }
}

onMounted(() => {
  getCouponActivity()
  getCouponList()
})

</script>

<style lang='scss' scoped>
</style>
